<script setup>
import * as menuApi from '@/api/menu.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref } from 'vue';
import EditDialog from './components/EditDialog.vue';
import moment from 'moment';
    // 列表数据
    const list = reactive({data:[]})

    // form表单类============
    let form = ref({})
    // ==============

    let dialogVisible = ref(false);
    let expand = ref(false);

    // 初始化
    const init = () =>{
      menuApi.getList().then(res =>{
            console.log(res)
            list.data = res.data
        })
    }

    init()

    // 弹窗
    const dialog = (v,s) => {
        let copyParentId = v ? v.parentId : '0';
        if(v) v.parentId = v.id;
        form.value = v ? v : {
            id: '',
            name: '',
            permission: '',
            path: '',
            url: '',
            method: '',
            parentId: '0',
            icon: '',
            component: '0',
            sort: 1,
            type: '0',
            delFlag: '0'
        };
        form.value.treeData = list.data;
        form.value.status = s;
        if(v) form.value.copyParentId = copyParentId;
        dialogVisible.value = true;
    }

    // 删除方法
    const del = (id) => {
        ElMessageBox.confirm('请确认删除...', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          menuApi.remove(id).then((res) => {
                ElMessage({
                    message: res.msg,
                    type: 'success'
                })
                init()
            })
        })
    }
</script>
<template>
    <div class="container">
        <div class="head">
            <!-- 查询功能组件 -->
            <div class="bottom">
                <!-- 添加按钮 -->
                <el-button type="primary" @click="dialog(null,0)">添加</el-button>
                <el-button type="primary" @click="expand = !expand">展开全部</el-button>
            </div>
        </div>
        <div class="middle">
            <!-- 表格 -->
            <el-table
                :data="list.data"
                style="width: 100%"
                row-key="id"
                :default-expand-all="expand"
                :tree-props="{ children: 'children'}"
            >
                <el-table-column prop="name" label="菜单名" />
                <el-table-column prop="permission" label="权限标识符" />
                <el-table-column prop="component" label="组件路径" />
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-tag v-if="scope.row.delFlag === '0'">正常</el-tag>
                        <el-tag v-else>删除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template #default="scope">
                        {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="100">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="dialog(scope.row,0)" v-if="scope.row.type !== '2'">添加</el-button>
                        <el-button type="warning" size="small" @click="dialog(scope.row,1)">修改</el-button>
                        <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 编辑弹窗 -->
        <edit-dialog @success="init" :data="form" v-model="dialogVisible" />
    </div>
</template>
<style lang="scss" scoped>
    .container{
        height: 100%;
        display: flex;
        flex-direction: column;
        .head{
            margin-bottom: 6px;
        }
        .middle{
            margin-bottom: 12px;
        }
    }
</style>
